<template>
  <page-header-wrapper>
    <a-card :bordered="false">
      <div class="table-page-search-wrapper">
      </div>
      <div class="table-operator">
        <a-button type="primary" icon="plus" @click="handleAdd">新建</a-button>
      </div>
      <s-table
        ref="table"
        size="default"
        rowKey="id"
        :columns="columns"
        :data="loadData"
        showPagination="auto"
        :scroll="{ x: 'auto' }"
      >
        <span slot="status" slot-scope="text">
          <a-badge :color="text | statusFilter(statusList, 'status')" :text="text | statusFilter(statusList, 'name')" />
        </span>
        <span slot="lang" slot-scope="text">
          {{lang[text]}}
          <!-- {{text}}
          {{JSON.stringify(lang)}} -->
          <!-- <a-badge  :text="lang[text]" /> -->
          <!-- :color="" -->
        </span>
        
        <span slot="param" slot-scope="text">
          <div class="remark-wrap">{{ text }}</div>
        </span>
        <span slot="action" slot-scope="text, record">
          <template>
            <span>
              <a @click="handleEdit(record)">编辑</a>
              <a-divider type="vertical" />
            </span>
            
            <span>
              <a @click="handleDel(record)">删除</a>
            </span>
            <!-- <span v-action:user_update> -->
          </template>
        </span>
      </s-table>
      <product-form 
        ref="createModal"
        :visible="visible"
        :loading="confirmLoading"
        :model="mdl"
        @cancel="handleCancel"
        @ok="handleOk"
      ></product-form>
    </a-card>
  </page-header-wrapper>
</template>

<script>
import moment from 'moment'
import { STable } from '@/components'
import { statusList, eachMap } from '@/utils/other'
import { serviceProductList, serviceProductUpdate, serviceProductAdd } from '@/api/service'
import ProductForm from './modules/ProductForm'
import { lang } from '@/locales'
console.log(lang['zh-cn']);


const columns = [
  {
    title: 'ID',
    dataIndex: 'id',
    key: 'id',
    width: 100,
  },
  {
    title: '产品名称',
    dataIndex: 'name',
    width: '120px',
  },
  {
    title: '所属语言',
    dataIndex: 'lang',
    width: '120px',
    scopedSlots: { customRender: 'lang' },
  },
  {
    title: '跳转链接',
    dataIndex: 'url',
    width: '200px',
  },
  {
    title: '排序',
    dataIndex: 'sort',
    width: '80px',
  },
  // {
  //   title: '说明',
  //   dataIndex: 'remark',
  //   width: '200px',
  // },
  {
    title: '状态',
    dataIndex: 'status',
    width: '100px',
    scopedSlots: { customRender: 'status' },
  },
  {
    title: '操作',
    dataIndex: 'action',
    width: '240px',
    scopedSlots: { customRender: 'action' },
  },
  
]

export default {
  name: 'AWM-product',
  components: {
    STable,
    ProductForm
  },
  data() {
    this.columns = columns
    return {
      lang,
      visible: false,
      confirmLoading: false,
      mdl: null,
      // 高级搜索 展开/关闭
      advanced: false,
      // 查询参数
      parameter: {
        pageNum: 1,
        pageSize: 10,
      },
      queryParam: {},
      data: [],
      // 状态
      statusList,
      // typeList,
      // 排序
      // 加载数据方法 必须为 Promise 对象
      loadData: (parameter) => {
        let sortJ = this.sortJ
        const requestParameters = Object.assign( parameter, this.queryParam)
        return serviceProductList(requestParameters).then((res) => {
          let _data = res.data.data
          if(typeof(_data) == 'string'){
            _data = JSON.parse(_data)
          }
          let result = {
            data: _data,
            pageNo: parameter.pageNo,
            pageSize: parameter.pageSize,
            totalCount: res.data.total,
            totalPage: res.data.pages,
          }
          return result
        })
      },
      selectedRowKeys: [],
      selectedRows: [],
    }
  },
  created() {},
  computed: {
  },
  methods: {
    handleAdd() {
      this.mdl = null
      this.visible = true
    },
    handleEdit(record) {
      this.visible = true
      this.mdl = { ...record }
    },
    saveCB() {
      const form = this.$refs.createModal.form
      this.visible = false
      this.confirmLoading = false
      // 重置表单数据
      form.resetFields()
      // 刷新表格
      this.$refs.table.refresh()
    },
    handleOk() {
      const form = this.$refs.createModal.form
      this.confirmLoading = true
      form.validateFields((errors, values) => {
        if (!errors) {
          if (values.id > 0) {
            serviceProductUpdate(values)
              .then((res) => {
                this.saveCB()
                this.$message.success('修改成功!')
              })
              .catch((err) => {
                this.saveCB()
              })
          } else {
            delete values.id
            serviceProductAdd(values)
              .then((res) => {
                this.saveCB()
                this.$message.success('新增成功!')
              })
              .catch((err) => {
                this.saveCB()
              })
          }
        } else {
          this.confirmLoading = false
        }
      })
    },
    handleCancel() {
      this.visible = false
      const form = this.$refs.createModal.form
      form.resetFields() // 清理表单数据（可不做）
    },
    handleDel(a_record) {
      let self = this
      const modal = self.$confirm({
        title: '产品删除',
        content: `是否删除产品:${a_record.name}`,
        okText: '确认',
        cancelText: '取消',
        onOk: () => self.handleDeleteRole(a_record.id, modal, -1),
        onCancel: () => {},
      })
    },
    handleDeleteRole(a_id, a_modal, a_type) {
      return new Promise((resolve, reject) => {
        let data = { id: a_id, status: a_type }
        serviceProductUpdate(data)
          .then((res) => {
            this.$refs.table.refresh()
            this.$message.success('删除成功!')
            resolve()
          })
          .catch((err) => {
            a_modal.destroy()
            this.$message.error('操作失败!')
          })
      })
    },
  },
}
</script>

 